<template>
  <view class="detail-container">
    <!-- 医院信息 -->
    <view class="hospital-info card"
      @tap="navigateToHospital"
    >
      <image :src="hospital.logo" mode="aspectFit" class="logo" />
      <view class="info">
        <text class="name">{{ hospital.name }}</text>
        <text class="address">{{ hospital.address }}</text>
        <view class="tags">
          <text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
        </view>
      </view>
      <text class="iconfont icon-arrow-right"></text>
    </view>
    
    <!-- 科室基本信息 -->
    <view class="basic-info card">
      <view class="header">
        <image :src="department.icon" mode="aspectFit" class="icon" />
        <view class="info">
          <text class="name">{{ department.name }}</text>
          <text class="desc">{{ department.description }}</text>
        </view>
      </view>
      <view class="stats">
        <view class="stat-item">
          <view class="icon-wrap">
            <text class="iconfont icon-team"></text>
          </view>
          <text class="value">{{ department.doctorCount }}人</text>
          <text class="label">医生团队</text>
        </view>
        <view class="stat-item">
          <view class="icon-wrap">
            <text class="iconfont icon-star"></text>
          </view>
          <text class="value">{{ department.rating }}分</text>
          <text class="label">综合评分</text>
        </view>
        <view class="stat-item">
          <view class="icon-wrap">
            <text class="iconfont icon-user"></text>
          </view>
          <text class="value">{{ department.appointmentCount }}人</text>
          <text class="label">已预约</text>
        </view>
      </view>
    </view>
    
    <!-- 医生团队 -->
    <view class="doctors-section card">
      <view class="section-header">
        <view class="section-title">医生团队</view>
        <text class="more">查看全部</text>
      </view>
      <scroll-view 
        scroll-x 
        class="doctor-list"
        enhanced
        :show-scrollbar="false"
        :bounces="false"
      >
        <view 
          class="doctor-item"
          v-for="(doctor, index) in department.doctors"
          :key="index"
          @tap="selectDoctor(doctor)"
        >
          <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
          <text class="name">{{ doctor.name }}</text>
          <text class="title">{{ doctor.title }}</text>
          <text class="specialty">{{ doctor.specialty }}</text>
          <view class="rating">
            <text class="score">{{ doctor.rating }}分</text>
            <text class="count">{{ doctor.ratingCount }}评价</text>
          </view>
          <button class="book-btn primary-btn">预约</button>
        </view>
      </scroll-view>
    </view>
    
    <!-- 诊疗项目 -->
    <view class="services-section card">
      <view class="section-title">诊疗项目</view>
      <view class="service-list">
        <view 
          class="service-item"
          v-for="(service, index) in department.services"
          :key="index"
        >
          <view class="service-info">
            <text class="iconfont icon-service"></text>
            <text class="name">{{ service.name }}</text>
          </view>
          <text class="price">¥{{ service.price }}</text>
        </view>
      </view>
    </view>
    
    <!-- 就医指南 -->
    <view class="guide-section card">
      <view class="section-title">就医指南</view>
      <view class="guide-steps">
        <view 
          class="step-item"
          v-for="(step, index) in department.guide"
          :key="index"
        >
          <view class="step-num" :style="{ background: `linear-gradient(135deg, ${getStepColor(index)})` }">
            {{ index + 1 }}
          </view>
          <view class="step-info">
            <text class="title">{{ step.title }}</text>
            <text class="desc">{{ step.description }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 患者评价 -->
    <view class="reviews-section card">
      <view class="section-header">
        <view class="section-title">患者评价</view>
        <text class="total">共{{ department.reviews.length }}条评价</text>
      </view>
      <view class="review-list">
        <view 
          class="review-item"
          v-for="(review, index) in department.reviews"
          :key="index"
        >
          <view class="user-info">
            <image :src="review.avatar" mode="aspectFill" class="avatar" />
            <text class="name">{{ review.name }}</text>
            <text class="time">{{ review.time }}</text>
          </view>
          <text class="content">{{ review.content }}</text>
          <view class="doctor-reply" v-if="review.reply">
            <text class="label">医生回复：</text>
            <text class="reply-content">{{ review.reply }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部预约按钮 -->
    <view class="bottom-bar">
      <button class="submit-btn primary-btn" @tap="bookDepartment" hover-class="button-hover">
        立即预约
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 科室详情数据
const department = ref({
  id: 1,
  name: '心内科',
  icon: '/static/department/cardiology.png',
  description: '主要诊治心血管疾病，包括冠心病、高血压等',
  doctorCount: 8,
  rating: 4.9,
  appointmentCount: 2580,
  doctors: [
    {
      id: 1,
      name: '张医生',
      title: '主任医师',
      avatar: '/static/doctor/doctor1.jpg',
      specialty: '冠心病、心律失常',
      rating: 4.9,
      ratingCount: 1280
    },
    // ... 更多医生数据
  ],
  services: [
    {
      name: '普通门诊',
      price: 60
    },
    {
      name: '专家门诊',
      price: 120
    },
    {
      name: '心电图检查',
      price: 80
    }
  ],
  guide: [
    {
      title: '预约挂号',
      description: '在线选择医生和就诊时间进行预约'
    },
    {
      title: '取号就诊',
      description: '就诊当天提前半小时到医院取号'
    },
    {
      title: '医生诊疗',
      description: '按时到诊室就医，出示预约信息'
    }
  ],
  reviews: [
    {
      avatar: '/static/avatar/user1.jpg',
      name: '张**',
      time: '2024-03-20',
      content: '医生很专业，态度也很好，解答很详细',
      reply: '感谢您的信任，祝您身体健康！'
    }
  ]
})

// 选择医生
const selectDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?doctorId=${doctor.id}`
  })
}

// 预约科室
const bookDepartment = () => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?departmentId=${department.value.id}&hospitalId=${hospital.value.id}`
  })
}

// 医院信息
const hospital = ref({
  id: 1,
  name: '澳门镜湖医院',
  logo: '/static/hospital/kiang-wu.jpg',
  address: '澳门连胜马路33号',
  tags: ['综合医院', '24小时急诊', '特需门诊'],
  rating: 4.8,
  distance: 2.5
})

const navigateToHospital = () => {
  uni.navigateTo({
    url: `/pages/hospital/detail?id=${hospital.value.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const departmentId = page.$page?.options?.id
  const hospitalId = page.$page?.options?.hospitalId
  
  // 加载数据
  loadHospitalInfo(hospitalId)
  loadDepartmentDetail(departmentId)
})

// 加载医院信息
const loadHospitalInfo = (hospitalId) => {
  // 这里应该是从API获取医院信息
  console.log('加载医院信息:', hospitalId)
}

const loadDepartmentDetail = (id) => {
  // 加载科室详情数据的逻辑
}

// 获取步骤颜色
const getStepColor = (index) => {
  const colors = [
    '#67AFAB, #89C4C1',
    '#747CF9, #9B7CF9',
    '#FF9B6A, #FF6B8B',
    '#4DCEA5, #2FB4AE'
  ]
  return colors[index % colors.length]
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .hospital-info {
    margin: 20rpx;
    display: flex;
    align-items: center;
    position: relative;
    
    &:active {
      transform: scale(0.98);
    }
    
    &::after {
      content: '>';
      position: absolute;
      right: 30rpx;
      font-size: 24rpx;
      color: $text-secondary;
    }
    
    .logo {
      width: 100rpx;
      height: 100rpx;
      border-radius: $radius-md;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .address {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .tags {
        text {
          display: inline-block;
          font-size: 22rpx;
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }
    }
    
    .icon-arrow-right {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24rpx;
      color: $text-secondary;
    }
  }
  
  .basic-info {
    margin: 20rpx;
    
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      
      .icon {
        width: 100rpx;
        height: 100rpx;
        padding: 20rpx;
        background: $primary-light;
        border-radius: $radius-lg;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 36rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .desc {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
    }
    
    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      padding: 30rpx 0;
      border-top: 1rpx solid #eee;
      
      .stat-item {
        text-align: center;
        
        .icon-wrap {
          width: 80rpx;
          height: 80rpx;
          margin: 0 auto 16rpx;
          background: $primary-light;
          border-radius: 50%;
          @include flex-center;
          
          .iconfont {
            font-size: 40rpx;
            color: $primary-color;
          }
        }
        
        .value {
          font-size: 36rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .label {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
    }
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .more {
      font-size: 26rpx;
      color: $text-secondary;
    }
  }
  
  .doctors-section {
    margin: 20rpx;
    
    .doctor-list {
      white-space: nowrap;
      margin: 0 -30rpx;
      padding: 0 30rpx;
      
      .doctor-item {
        display: inline-block;
        width: 300rpx;
        margin-right: 20rpx;
        text-align: center;
        
        &:last-child {
          margin-right: 0;
        }
        
        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 60rpx;
          margin-bottom: 16rpx;
          border: 2rpx solid rgba($primary-color, 0.1);
        }
        
        .name {
          font-size: 28rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .title {
          font-size: 24rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .specialty {
          font-size: 24rpx;
          color: $text-secondary;
          margin-bottom: 12rpx;
          display: block;
        }
        
        .rating {
          margin-bottom: 16rpx;
          
          .score {
            font-size: 26rpx;
            color: $warning;
            font-weight: bold;
            margin-right: 8rpx;
          }
          
          .count {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .book-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 26rpx;
          margin: 0 auto;
        }
      }
    }
  }
  
  .services-section {
    margin: 20rpx;
    
    .service-list {
      .service-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
        
        .service-info {
          display: flex;
          align-items: center;
          
          .iconfont {
            font-size: 40rpx;
            color: $primary-color;
            margin-right: 16rpx;
          }
        }
        
        .price {
          font-size: 32rpx;
          color: $danger;
          font-weight: bold;
        }
      }
    }
  }
  
  .guide-section {
    margin: 20rpx;
    
    .guide-steps {
      .step-item {
        display: flex;
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .step-num {
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;
          color: #fff;
          font-size: 28rpx;
          font-weight: bold;
          margin-right: 20rpx;
          flex-shrink: 0;
          @include flex-center;
        }
        
        .step-info {
          flex: 1;
          
          .title {
            font-size: 28rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .desc {
            font-size: 26rpx;
            color: $text-regular;
          }
        }
      }
    }
  }
  
  .reviews-section {
    margin: 20rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .total {
        font-size: 26rpx;
        color: $text-secondary;
      }
    }
    
    .review-list {
      .review-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .user-info {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          
          .avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            margin-right: 16rpx;
          }
          
          .name {
            font-size: 26rpx;
            color: $text-primary;
            margin-right: 16rpx;
          }
          
          .time {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .content {
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .doctor-reply {
          background: $bg-color;
          padding: 20rpx;
          border-radius: $radius-sm;
          
          .label {
            font-size: 26rpx;
            color: $primary-color;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .reply-content {
            font-size: 26rpx;
            color: $text-regular;
            line-height: 1.6;
          }
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    
    .submit-btn {
      width: 100%;
      
      &.button-hover {
        transform: scale(0.98);
        opacity: 0.9;
      }
    }
  }
}
</style> 